<script setup>
import { useOrderGoodstStore } from '@/stores/index'
import GoodDialog from './goodDialog.vue'
import { ref } from 'vue'
import { memberOrderDel } from '@/api/order'
import { ElMessage } from 'element-plus'
import { storeToRefs } from 'pinia'
import countdown from './Countdown.vue'
import router from '@/router'
const store = useOrderGoodstStore()
const getState = state => {
  switch (state) {
    case 1:
      return '待付款'

    case 2:
      return '待发货'

    case 3:
      return '待收货'

    case 4:
      return '待评价'

    case 5:
      return '已完成'

    case 6:
      return '已取消'
  }
}

const { page } = storeToRefs(store.Info)
const currChange = value => {
  const dr = { ...store.pageData, page: value }
  store.setPageData(dr)
  store.getData()
}

const goodDel = ref()

const openDialog = id => {
  goodDel.value.show = true
  goodDel.value.id = id
}
const delEvent = async id => {
  await memberOrderDel({ ids: [id] })
  ElMessage.success('删除成功')
  store.getData()
}

// 打开详情页
const openDetail = id => {
  router.push(`/user/order/${id}`)
}

// 打开支付页
const openPay = id => {
  router.push(`/pay/${id}`)
}
</script>
<template>
  <div class="main">
    <span v-if="!store.Info.items || !store.Info.items[0]">暂无数据</span>
    <div class="goods" v-for="item in store.Info.items" :key="item.id">
      <div class="top">
        <div class="lef">
          下单时间：<span>{{ item.createTime }}</span> 订单编号：<span>{{ item.id }}</span>
        </div>
        <div class="right">
          <span v-if="item.orderState === 1">
            <el-icon class="elIcon">
              <Timer />
            </el-icon>
            付款截至：
            <countdown :countdown="item.countdown"></countdown>
          </span>
          <span v-else-if="item.orderState === 5 || item.orderState === 6">
            <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              title="你确认删除该订单嘛？"
              @confirm="delEvent(item.id)"
            >
              <template #reference>
                <el-button>删除</el-button>
              </template>
            </el-popconfirm>
          </span>
        </div>
      </div>
      <div class="bot">
        <div class="lef">
          <div class="item" v-for="good in item.skus" :key="good.id">
            <img :src="good.image" alt="" class="goodImg" />
            <div class="content">
              <div class="top">{{ good.name }}</div>
              <div class="but">{{ good.attrsText }}</div>
            </div>
            <div class="money">￥{{ good.realPay }}</div>
            <div class="number">X{{ good.quantity }}</div>
          </div>
        </div>
        <div class="state">{{ getState(item.orderState) }}</div>
        <div class="money">
          <span class="totalMoney">￥{{ item.totalMoney }}</span>
          <span>{{ item.postFee === 0 ? '' : '（含运费：￥' + item.postFee + '）' }}</span>
          <span>{{ item.payType === 1 ? '在线支付' : '货到付款' }}</span>
        </div>
        <div class="opera">
          <el-button type="primary" v-if="item.orderState === 1" @click="openPay(item.id)">立即付款</el-button>
          <div @click="openDetail(item.id)">查看详情</div>
          <div @click="openDialog(item.id)" v-if="item.orderState === 1">取消订单</div>
        </div>
      </div>
    </div>
    <el-pagination
      v-if="store.Info.page"
      @current-change="currChange"
      v-model:current-page="page"
      :page-count="store.Info.pages"
      layout="prev, pager, next"
      :total="1000"
      :hide-on-single-page="true"
    />
    <good-dialog ref="goodDel"></good-dialog>
  </div>
</template>
<style scoped lang="scss">
* {
  box-sizing: border-box;
}

.main {
  text-align: center;
  .goods {
    padding-bottom: 20px;
    width: 968px;
    .top {
      padding: 10px;
      //width: 1000px;
      display: flex;
      background-color: #f5f5f5;
      .right {
        //flex: 1;
        text-align: right;
        width: 200px;
      }
      .lef {
        text-align: left;
        flex: 1;
      }
    }
    .bot {
      min-height: 150px;
      display: flex;
      div {
        padding-top: 20px;
        text-align: center;
        border: #f5f5f5 solid 1px;
      }
      .lef {
        padding-top: 0;
        flex: 1;
        .item {
          padding: 0;
          div {
            background-color: #fff;
            border: none;
            padding: 0;
          }
          height: 90px;
          display: flex;
          align-items: center;
          .goodImg {
            height: 70px;
            width: 70px;
            padding-right: 10px;
          }
          .content {
            font-size: 13px;
            flex: 1;

            .but {
              color: #999999;
              text-align: left;
            }
            .top {
              padding-bottom: 5px;
              text-align: left;
            }
          }
          .money {
            width: 100px;
          }
          .number {
            width: 80px;
          }
        }
      }
      .state {
        width: 120px;
      }
      .money {
        width: 200px;
        display: flex;
        flex-direction: column;
        .totalMoney {
          color: red;
        }
        span {
          padding-bottom: 5px;
        }
      }
      .opera {
        div {
          &:hover {
            color: #27ba9b;
          }
          padding-top: 10px;
          border: none;
        }
        width: 150px;
      }
    }
  }
}
</style>
